'use strict';
var React = require('react');
var Router = require('react-router'); 
var Link = Router.Link;
var Route = Router.Route;

var MenuComponent = React.createClass({
  mixins: [ Router.State ],
  render: function() {
    var routers = {
      my : {
        name : 'my',
        url : '/do/my',
        active : false
      },qus : {
        name: 'questions',
        url : '/do/questions',
        active : false
      },user : {
        url : '/do/name',
        name : 'user',
        active : false
      },data : {
        name : 'data',
        url : '/do/data',
        active : false
      },center :{
        name : 'center',
        url : '/do/center',
        active : false
      }
    };

    var path = this.getPath();
    var parentUrl;
    for(var i in  routers){
        var item = routers[i];
        parentUrl = path.substr(0,item.url.length);
        item.active = parentUrl == item.url ? true : false;
    }

    return (
      /* jshint ignore:start */
        <ul className="do-nav-stacked">
                  <li>
                        <Link to={ routers.my.name } className={ routers.my.active ? 'active' : '' }>
                              我的问题
                              <span className="do-nav-icon">
                                    <i className="fa fa-angle-right"></i>
                              </span>
                        </Link>
                  </li>
                  <li>
                        <Link to={ routers.qus.name } className={ routers.qus.active ? 'active' : '' }>
                              问题大厅
                              <span className="do-nav-icon">
                                    <i className="fa fa-angle-right"></i>
                              </span>
                        </Link>
                  </li>
                  <li>
                        <Link to={ routers.user.name } className={ routers.user.active ? 'active' : '' }>
                              用户管理
                              <span className="do-nav-icon">
                                    <i className="fa fa-angle-right"></i>
                              </span>
                        </Link>
                  </li>
                  <li>
                        <Link to={ routers.data.name } className={ routers.data.active ? 'active' : '' }>
                              数据统计
                              <span className="do-nav-icon">
                                    <i className="fa fa-angle-right"></i>
                              </span>
                        </Link>
                  </li>
                  <li>
                        <Link to={ routers.center.name } className={ routers.center.active ? 'active' : '' }>
                              个人中心
                              <span className="do-nav-icon">
                                    <i className="fa fa-angle-right"></i>
                              </span>
                        </Link>
                  </li>
            </ul>
      /* jshint ignore:end */
    );
  }
});

module.exports =MenuComponent;